<!--表单提交-->
<template>
  <div v-if="searchList.length > 0">
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item
        v-for="(item, index) in searchList"
        :key="index"
        :label="item.label"
        :label-col="formSet.labelCol"
        :wrapper-col="formSet.wrapperCol"
      >
        <a-select
          size="large"
          v-if="item.type === 'select'"
          :placeholder="
            item.placeholder ? item.placeholder : '请选择' + item.label
          "
          v-decorator="[
            item.name,
            {
              initialValue: isEmpty(item.initialValue)
                ? null
                : item.initialValue,
              rules: item.rules ? item.rules : []
            }
          ]"
        >
          <a-select-option
            v-for="i in item.option"
            :value="i.value"
            :key="i.value"
            >{{ i.title }}</a-select-option
          >
        </a-select>
        <a-radio-group
          v-if="item.type === 'radio-group'"
          size="large"
          v-decorator="[
            item.name,
            {
              initialValue: item.initialValue ? item.initialValue : null,
              rules: item.rules ? item.rules : []
            }
          ]"
          :options="item.options"
        />
        <a-input
          size="large"
          v-if="item.type === 'input'"
          v-decorator="[
            item.name,
            {
              initialValue: item.initialValue ? item.initialValue : null,
              rules: item.rules ? item.rules : []
            }
          ]"
          :placeholder="item.placeholder ? '请输入' + item.placeholder : ''"
          :type="item.inputType ? item.inputType : 'text'"
        ></a-input>
        <a-input-number
          size="large"
          v-if="item.type === 'input-number'"
          style="width: 100%"
          v-decorator="[
            item.name,
            {
              initialValue: item.initialValue ? item.initialValue : null,
              rules: item.rules ? item.rules : []
            }
          ]"
        />
        <a-date-picker
          size="large"
          v-if="item.type === 'date-picker'"
          :placeholder="item.placeholder"
        ></a-date-picker>
        <a-range-picker
          size="large"
          v-if="item.type === 'range-picker'"
          :placeholder="['开始时间', '结束时间']"
        ></a-range-picker>
        <a-tree-select
          size="large"
          v-if="item.type === 'tree-select'"
          :treeData="item.option"
          :treeDataSimpleMode="true"
          v-decorator="[
            item.name,
            {
              initialValue: item.initialValue ? item.initialValue : null,
              rules: item.rules ? item.rules : []
            }
          ]"
        >
        </a-tree-select>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { TreeSelect } from "ant-design-vue";
export default {
  name: "search",
  components: {
    aTreeSelect: TreeSelect
  },
  props: {
    searchList: {
      type: Array
    },
    formSet: {
      type: Object
    }
  },
  data() {
    return {
      form: this.$form.createForm(this),
      icon: ""
    };
  },
  methods: {
    isEmpty(obj) {
      if (obj === undefined) {
        return true;
      } else {
        return false;
      }
    },
    submit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$emit("formValue", values);
        }
      });
    },
    handleSubmit(e) {
      e.preventDefault();
      this.submit();
    },
    handleReset() {
      this.form.resetFields();
    }
  }
};
</script>

<style scoped lang="less"></style>
